<template>
	<div class="content">
		<div class="clear">
			<Form inline class="fl">
				<Input type="text" placeholder="订单单号" class="w200 m-r10" v-model.trim="orderNum" />
				<Input type="text" placeholder="明细单号" class="w200 m-r10" v-model.trim="detailNum" />
				<Input type="text" placeholder="商户手机号码" class="w200 m-r10" v-model.trim="otcName" />
				<Input type="text" placeholder="用户手机号码" class="w200 m-r10" v-model.trim="userName" />
				<Select placeholder="请选择类型" class="w200 m-r10" v-model="state">
					<Option value="-1">全部</Option>
					<Option value="0">买入</Option>
					<Option value="1">卖出</Option>
				</Select>
				<Select placeholder="请选择状态" class="w200 m-r10" v-model="state2">
					<Option value="-1">全部</Option>
					<Option value="1">取消</Option>
					<Option value="2">待付款</Option>
					<Option value="3">已付款</Option>
					<Option value="4">申诉中</Option>
					<Option value="5">确认已收款</Option>
					<Option value="6">已仲裁</Option>
				</Select>
				<DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="ifGetQuery">查询</Button>
			</Form>
		</div>
		<Button class="daochu" type="primary" size="large" @click="exportData" :loading="dcShow">
            <Icon type="ios-download-outline"></Icon> 导出</Button>
		<Table stripe :columns="columns" ref="table" :data='list' :loading="loading"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery" :current.sync="page"></Page>
		<Modal v-model="modal1" title="订单流程" width='45%'>
			<fieldset>
				<legend>交易信息</legend>
				<div>
					<tbody>
						<tr>
							<td>明细单号:
								<span class="blue">{{ detail.detailNum == null ? '#' : detail.detailNum }}</span>
							</td>
							<td>商户账号:
								<span class="blue">{{ detail.otcUserName == null ? '#' : detail.otcUserName }}</span>
							</td>
							<td>用户账号:
								<span class="blue">{{ detail.userName == null ? '#' : detail.userName }}</span>
							</td>
							<td>交易类型:
								<span class="blue">{{ detail.typeId == null ? '#' : detail.typeId == 0 ? '买入' : detail.typeId == 1 ? '卖出' : '#' }}</span>
							</td>
							<td>交易数量:
								<span class="blue">{{ detail.numberDeals == null ? '0.00' : Fixed(detail.numberDeals) }}</span>
							</td>
						</tr>
					</tbody>
				</div>
			</fieldset>
			<div style="padding: 20px 20px 0px">
				<Timeline>
					<TimelineItem v-for="(item,i) of list1" :key="i">
						<p class="time" v-text="stringToTime(item.createTime)"></p>
						<p class="content" v-text="item.createUserId == item.memberId ? '用户：' + item.remark : item.createUserId == item.otcMemberId ? '商户：' + item.remark : item.createUserId == 0 ? '系统：' + item.remark : '#'"></p>
					</TimelineItem>
				</Timeline>
			</div>
		</Modal>
		<Modal v-model="modal2" title="订单详情" width="40%">
			<div>
				<table>
					<tbody>
						<tr v-for="(item,i) of list2" :key="i">
							<td class="padding">
								<p>订单单号：</p>
								<span class="blue" v-text="item.orderNum == null ? '#' : item.orderNum"></span>
							</td>
							<td class="padding">
								<p>订单类型：</p>
								<span class="blue" v-text="item.type == null ? '#' : item.type == 0 ? '收购' : item.type == 1 ? '出售' : '#'"></span>
							</td>
							<td class="padding">
								<p>订单状态：</p>
								<span class="blue" v-text="item.status == null ? '#' : item.status == 0 ? '下架' : item.status == 1 ? '上架' : item.status == 2 ? '完结' : item.status == 3 ? '取消' : '#'"></span>
							</td>
							<td class="padding">
								<p>发布数量：</p>
								<span class="blue" v-text="item.releaseNum == null ? '#' : item.releaseNum"></span>
							</td>
							<td class="padding">
								<p>成交数量：</p>
								<span class="blue" v-text="item.successNum == null ? '#' : item.successNum"></span>
							</td>
							<td class="padding">
								<p>剩余数量：</p>
								<span class="blue" v-text="item.residueNum == null ? '#' : item.residueNum"></span>
							</td>
							<td class="padding">
								<p>发布日期：</p>
								<span class="blue" v-text="item.createTime == null ? '#' : stringToTime(item.createTime)"></span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dcShow: false,
				loading: true,
				loading2: true,
				jsonData: [],
				list: [], // 详情列表数据
				list1: [], // 流程列表数据
				list2: [], // 订单详情数据
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				current: 1,
				downList: [],
				dataValue: ['', ''], // 时间段值
				uuid: '', // 用户 ID
				orderNum: '',
				otcName:'',
				userName: '',
				detailNum: '',
				state: '-1',
				state2: '-1',
				modal1: false,
				modal2: false,
				detail: {
					otcUserName: '',
					userName: '',
					typeId: '',
					detailNum: '',
					numberDeals: '',
				},
				columns: [{
						title: '订单单号',
						align: 'center',
						key: 'orderNum',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											this.modal2 = true;
											this.loading2 = true;
											this.axios.post('/admin/otc/getOtcOrder', this.qs.stringify({
												current: '1',
												size: 1,
												current: '1',
												uuid: '',
												orderNum: params.row.orderNum,
												username: '',
												type: '',
												status: '',
												startTime: '',
												endTime: '',
											})).then(res => {
												if(res.data.code == 200) {
													this.loading2 = false;
													this.list2 = res.data.data.records;
												}
											})
										}
									}
								},
								params.row.orderNum == null ? '#' : params.row.orderNum
							)
						}
					}, {
						title: '明细单号',
						align: 'center',
						key: 'detailNum',
						render: (h, params) => {
							return h(
								'div', {
									style: {
										cursor: 'pointer',
										color: '#2db7f5'
									},
									on: {
										click: () => {
											this.modal1 = true;
											this.axios.post('/admin/otc/getOtcProcess', this.qs.stringify({
												detailId: params.row.id
											})).then(res => {
												if(res.data.code == 200) {
													this.list1 = res.data.data;
													this.detail = {
														otcUserName: res.data.data[0].otcUserName,
														userName: res.data.data[0].userName,
														typeId: params.row.typeId,
														detailNum: params.row.detailNum,
														numberDeals: params.row.numberDeals,
													};
												}
											})
										}
									}
								},
								params.row.detailNum == null ? '#' : params.row.detailNum
							)
						}
					},
					{
						title: '商户手机号码',
						align: 'center',
						key: 'otcName',
						render: (h, params) => {
							return h('div', params.row.otcName == null ? '#' : params.row.otcName)
						}
					},
					{
						title: '用户手机号码',
						align: 'center',
						key: 'userName',
						render: (h, params) => {
							return h('div', params.row.userName == null ? '#' : params.row.userName)
						}
					},
					{
						title: '交易类型',
						align: 'center',
						key: 'typeId',
						render: (h, params) => {
							return h('div', params.row.typeId == null ? '#' : params.row.typeId == 0 ? '买入' : params.row.typeId == 1 ? '卖出' : '#')
						}
					},
					{
						title: '订单状态',
						align: 'center',
						key: 'status',
						render: (h, params) => {
							return h('div', params.row.status == null ? '#' : params.row.status == 1 ? '取消' : params.row.status == 2 ? '待付款' : params.row.status == 3 ? '已付款' : params.row.status == 4 ? '申诉中' : params.row.status == 5 ? '确认已收款' : params.row.status == 6 ? '已仲裁' : '#');
						}
					},
					{
						title: '交易数量',
						align: 'center',
						key: 'numberDeals',
						render: (h, params) => {
							return h('div', params.row.numberDeals == null ? '#' : this.Fixed(params.row.numberDeals))
						}
					},
					{
						title: '付款方式',
						align: 'center',
						key: 'payChain',
						render: (h, params) => {
							return h('div', params.row.payChain == null ? '未付款' : params.row.payChain == 0 ? '银行卡支付' : params.row.payChain == 1 ? '微信支付' : params.row.payChain == 2 ? '支付宝支付' : '#')
						}
					},
					{
						title: '交易日期',
						align: 'center',
						key: 'createTime',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
						}
					},
				],
				columns2: [{
						title: '订单单号',
						key: 'orderNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.orderNum == null ? '#' : params.row.orderNum);
						}
					},
					{
						title: '交易类型',
						key: 'type',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.type == null ? '#' : params.row.type == 0 ? '收购' : params.row.type == 1 ? '发布' : '#');
						}
					},
					{
						title: '订单状态',
						key: 'orderNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.status == null ? '#' : params.row.status == 0 ? '下架' : params.row.status == 1 ? '上架' : params.row.status == 2 ? '完结' : params.row.status == 3 ? '取消' : '#');
						}
					},
					{
						title: '发布数量',
						key: 'releaseNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.releaseNum == null ? '#' : params.row.releaseNum);
						}
					},
					{
						title: '成交数量',
						key: 'successNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.successNum == null ? '#' : params.row.successNum);
						}
					},
					{
						title: '剩余数量',
						key: 'residueNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.residueNum == null ? '#' : params.row.residueNum);
						}
					},
					{
						title: '交易日期',
						key: 'createTime',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime));
						}
					},

				]
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			})
			if(localStorage.orderNum) {
				this.orderNum = localStorage.orderNum;
				localStorage.removeItem('orderNum');
			}
			this.getQuery() // 查询直推奖励
		},
		methods: {
			exportData() {
				this.jsonData = [];
				this.dcShow = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: this.otcName,
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
							current: 1, // 当前页【可选，默认1】
							size: res.data.data.total, // 每页记录数【可选，默认20】
							orderNum: this.orderNum ? this.orderNum : '',
							detailNum: this.detailNum,
							userName: this.userName,
							otcName: this.otcName,
							type: this.state == '-1' ? '' : this.state,
							status: this.state2 == '-1' ? '' : this.state2,
							startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
							endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
						})).then(res => {
							if(res.data.code == 200) {
								this.downList = res.data.data.records;
								this.downList.forEach((row, index) => {
									this.downList[index].orderNum = this.downList[index].orderNum == null ? '#' : this.downList[index].orderNum;
									this.downList[index].detailNum = this.downList[index].detailNum == null ? '#' : this.downList[index].detailNum;
									this.downList[index].userName = this.downList[index].userName == null ? '#' : this.downList[index].userName;
									this.downList[index].otcName = this.downList[index].otcName == null ? '#' : this.downList[index].otcName;
									this.downList[index].typeId = this.downList[index].typeId == null ? '#' : this.downList[index].typeId == 0 ? '买入' : this.downList[index].typeId == 1 ? '卖出' : '#';
									this.downList[index].status = this.downList[index].status == null ? '#' : this.downList[index].status == 1 ? '取消' : this.downList[index].status == 2 ? '待付款' : this.downList[index].status == 3 ? '已付款' : this.downList[index].status == 4 ? '申诉中' : this.downList[index].status == 5 ? '确认已收款' : this.downList[index].status == 6 ? '已仲裁' : '#';
									this.downList[index].numberDeals = this.downList[index].numberDeals == null ? '#' : this.Fixed(this.downList[index].numberDeals);
									this.downList[index].payChain = this.downList[index].payChain == null ? '未付款' : this.downList[index].payChain == 0 ? '银行卡支付' : this.downList[index].payChain == 1 ? '微信支付' : this.downList[index].payChain == 2 ? '支付宝支付' : '#';
									this.downList[index].createTime = this.stringToTime(this.downList[index].createTime);
									this.jsonData.push({
										orderNum: this.downList[index].orderNum,
										detailNum: this.downList[index].detailNum,
										otcName: this.downList[index].otcName,
										userName: this.downList[index].userName,
										typeId: this.downList[index].typeId,
										status: this.downList[index].status,
										numberDeals: this.downList[index].numberDeals,
										payChain: this.downList[index].payChain,
										createTime: this.downList[index].createTime,
									})
								})
								let str = `订单单号,明细单号,商户手机号码,用户手机号码,交易类型,订单状态,交易数量,付款方式,交易日期\n`;
								this.downLoad(this.jsonData, str, '明细订单');
							}
						})
					}
				})
			},
			// 处理时间段时间格式
			getTime(daterange) {
				this.dataValue = daterange
			},
			getQuery() {
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: this.otcName,
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			},
			cuctGetQuery(page) { // 分页查询直推奖励
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: this.otcName,
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			},
			ifGetQuery() { // 条件查询直推奖励
				this.page = 1;
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: this.otcName,
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	/deep/ .content {
		border: 0 !important;
		margin-top: 0 !important;
	}
</style>